<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
    <meta charset="UTF-8">
    <title>Table_ajax</title>
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit </a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">User Information</div><hr />
    <form id="form">
        <table cellpadding="5">
            <tr>
                <td>productid:</td>
                <td><input class="easyui-textbox" type="text" name="productid" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>productname:</td>
                <td><input class="easyui-textbox" type="text" name="productname" data-options="required:true,validType:'email'"></input></td>
            </tr>
            <tr>
                <td>unitcost:</td>
                <td><input class="easyui-textbox" type="text" name="unitcost" data-options="required:true"></input></td>
            </tr>
            <tr>
                <td>status</td>
                <td><input class="easyui-textbox" type="text" name="status" data-options="multiline:true" ></input></td>
            </tr>
            <tr>
                <td>listprice</td>
                <td><input class="easyui-textbox" name="listprice" data-options="multiline:true"></input></td>
            </tr>
            <tr>
                <td>attr1</td>
                <td><input class="easyui-textbox" name="attr1" data-options="multiline:true" style="height:60px"></input></td>
            </tr>
            <tr>
                <td>itemid:</td>
                <!--multiline定义是否是多行文本-->
                <td><input class="easyui-textbox" name="itemid" data-options="multiline:true" ></input></td>
            </tr>
        </table>
    </form>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</div>
<script type="text/javascript">
    <!--弹窗初始化-->
    $("#form").form({});
    //   将在服务端的数据加载到form的表单当中
//    $("#form").form('load',"/day12/formData");


    <!--表格初始化-->
    $("#dg").datagrid({
        url:"/day12/tableDate",
        singleSelect:true,
        toolbar:"#toolbar",
        rownumbers:"true",
        fitColumns:"true",
        columns:[[
            {field:'productid',title:'产品',width:100},
            {field:'productname',title:'名称',width:100},
            {field:'unitcost',title:'单价',width:100,align:'right'},
            {field:'status',title:'状态',width:100},
            {field:'listprice',title:'价格',width:100},
            {field:'attr1',title:'描述',width:100},
            {field:'itemid',title:'物品id',width:100,align:'center'}
        ]]
    });


//  函数的实现

//    该函数实现form的加载
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','New User');
        $('#form').form('clear');
//          url = '/day12/tableDate';
       }

//     该函数实现edit
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','Edit User');
            $('#fm').form('load',row);
//          url:"/day12/ajaxData"
        }
    }

//   保存用户的数据
    function saveUser(){
        $('#form').form('submit',{
            url: "/day12/tableDate",
            onSubmit: function(){
//                return $(this).form('validate');
            },
            success: function(data){
                $('#dlg').dialog('close');		// close the dialog
                $('#dg').datagrid({
                    data:data
                });	// reload the user data
    }

    });
    }

//   实现删除一个用户
    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                if (r){
                    $.post('destroy_user.php',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');	// reload the user data
                        } else {
                            $.messager.show({	// show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }


</script>
</body>
</html>